<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c">应用套餐订阅情况</div>
    </div>
    <div class="md:flex">
      <div class="md:w-full md:h-1/8 md:mb-5">
        <Card>
          <div class="py-2 px-2 flex justify-between">
            <div class="text-2xl" style="color: gray">总订阅数: {{ totalSubNum }}</div>
          </div>
        </Card>
      </div>
    </div>
    <div class="md:flex">
      <AppAndTimePicker class="w-full enter-x" ref="appAndTimePickerRef" @success="handleSuccess"></AppAndTimePicker>
    </div>
    <div class="md:flex">
      <div :id="pieChartName" style="width: 600%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref } from 'vue';
import * as echarts from 'echarts';
import { ChartProps } from '/@/views/maintenance-center/cloud-service-monitor/Cards/props';
import AppAndTimePicker from '/@/views/operation-center/components/AppAndTimePicker.vue';
import { getAppPackageSubscription } from '/@/api/operation-center/tenant-opertation/user-activity-analysis/userActivityAnalysis';
import { AppPackageSubDistributionMap } from '/@/api/operation-center/tenant-opertation/user-activity-analysis/model/userActivityAnalysisModel';

const appAndTimePickerRef = ref();

const pieChartName = 'app-package-pie-chart';

var option;

const subDurationList = ['3个月以下', '3-6个月', '6-12个月', '1年以上'];

let totalSubNum = ref();

let appPackageDurationDisList: any[] = [];

defineProps({
  ...ChartProps,
});

function convertSubDurationDis(res: AppPackageSubDistributionMap[]) {
  let pieItemList: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let item = res[i];
    let pieItem = {
      name: subDurationList[item.subDuration],
      value: item.subNum,
    };
    pieItemList.push(pieItem);
  }
  appPackageDurationDisList = pieItemList;
}

const handleSuccess = (params) => {
  let chartDom = document.getElementById(pieChartName);

  let myChart = echarts.init(chartDom);

  appPackageDurationDisList = [];

  getAppPackageSubscription(params).then((res) => {
    totalSubNum.value = res.totalSubscriptions;

    let subDurationDis = res.subTimeDistribution;

    // 将应用套餐时长订阅分布转换为echarts饼图的标准格式
    convertSubDurationDis(subDurationDis);

    option = {
      series: [
        {
          type: 'pie',
          data: appPackageDurationDisList,
          // radius: '50%',
        },
      ],
    };

    option && myChart.setOption(option);
  });
};
</script>
